<template>
    <div>
        <div v-if="isEdit">
            <el-input-number v-model="value" :min="1"
                             @change="quantityChange" style="width: 110px;float: left"
                             controls-position="right" :step="1">
            </el-input-number>
            <el-tooltip content="Ok" placement="top">
                <el-button type="text" style="font-size: 16px;margin-top: 4px;top: 50%;margin-top: -20px;
                                    position: absolute; right: 8px;cursor: pointer"
                           class="el-icon-check" @click="editQuantityOk()"></el-button>
            </el-tooltip>
        </div>
        <div v-if="!isEdit" class="quantityCont">{{scope.row.quantity}}
            <el-tooltip content="Edit" placement="top">
                <el-button type="text" style="font-size: 16px;margin-top: 4px;top: 50%;margin-top: -20px;
                                position: absolute; right: 14px;cursor: pointer"
                           class="el-icon-edit quantityEdit" @click="editQuantity()"></el-button>
            </el-tooltip>


        </div>
    </div>
</template>

<script>
import { applyUpdateMaterial } from "../../../components/axios/url";
import http from "../../../components/axios/fetch";
    export default {
        name: "editable-cell",
        props:{
            scope: {}
        },
        data() {
            return {
                page: 1,
                isEdit: false,
                value: this.scope.row.quantity
            }
        },
        methods: {
            editQuantity() {  // 是否弹出编辑数量框
                this.isEdit = true
            },
            quantityChange(value) { // 数量
                this.value = value
                let param = {
                    id: this.scope.row.id,
                    quantity: value
                }
            },
            editQuantityOk() {
                if(this.value < this.scope.row.quantityBasedOnMoq) {
                    this.value = this.scope.row.quantity
                    this.$notify({
                        title: '提示',
                        message: '数量不能小于最小订货量',
                        type: 'info'
                    });
                    return
                }
                let param = {
                    id: this.scope.row.id,
                    quantity: this.value
                }
                try{
                    http.post(applyUpdateMaterial, param).then(res => {
                        if(res.data && res.data.resultMess === "success") {
                            this.isEdit = false;
                            this.$emit('getMaterialList');
                            this.$notify({
                                title: '提示',
                                message: '修改成功',
                                type: 'success'
                            });
                        }
                    })
                }catch(error){
                    this.$notify.error({
                        title: '提示',
                        message: '网络错误',
                    });
                }
            }
        }

    }
</script>

<style scoped>
    .quantityEdit{
        display: none;
    }
    .quantityCont:hover .quantityEdit{
        display: block;
    }
</style>
